<template>
  <div>
    <div class="books heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">课程中心</a></el-breadcrumb-item>
        <el-breadcrumb-item>书籍筛选</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="block_flex" id="ToggleClass">
        <ul>
          <li v-for="(item_li, index) in 6" :key="item_li">
            <a href="#">
              <el-image
                lazy
                src="https://img.rongyuejiaoyu.com//uploads/20230201/4692e779de7750f1ef45e2241e6933ee.jpg"
              >
              </el-image>
              <div class="block_info">
                <p class="ptitle">CFA+FRM双证快速通关APS智播课（A计划）</p>
                <p class="ppress">出版社：美国Wiley出版社</p>
                <p class="pmoney"><small>￥25980.00</small></p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'books',
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.books {
  .el-breadcrumb {
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #444;
    background-color: #fff;
    padding: 12px 8px;
    margin: 14px 0;
    border-radius: 3px;
  }
}

.block_flex {
  ul {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    li {
      border-radius: 5px;
      box-shadow: -5px 5px 10px -5px #f1f1f1, 5px 5px 10px -5px #f1f1f1;
      transition: 0.5s all ease;
      margin-right: 32px;
      margin-bottom: 20px;
      background: #fff;
      box-sizing: border-box;
      width: 276px;
      // height: 270px;
    }

    li:nth-child(4n) {
      margin-right: 0;
    }

    li:hover {
      transform: translateY(-10px);
    }

    a {
      display: block;
      height: 100%;
      .el-image {
        width: 276px;
        height: 179px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }

      .block_info {
        p {
          padding: 0 10px;
        }

        .ppress {
          color: #753307;
          font-size: 14px;
          margin-top: 8px;
        }
        .ptitle {
          font-size: 16px;
          color: #333;
          margin-top: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .pmoney {
          overflow: hidden;
          margin-top: 10px;
          padding-bottom: 8px;

          small {
            color: #ff434b;
            font-size: 20px;
            float: left;
          }
        }
      }
    }
  }
}
</style>
